document.charset = 'UTF-8';

function sideBtnClick(id){
    var str = "";
    var p = 0;
    // снимаем обработчик, чтобы не вызывался повторно, до получения ответа
    this.onClick="";
    // Создаем объект для запроса к серверу
    var req = getXmlHttp();
    switch (id){
	case 'tab1':{
	    document.getElementById('tab1').className = 'btnOn';
	    document.getElementById('tab2').className = 'btnOff';
	    
	    req.open('POST', '../ajax/getList.php', true); 
	    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	    // onreadystatechange активируется при получении ответа сервера
	    req.onreadystatechange = function() 
	    { 
		// если запрос закончил выполняться
		if (req.readyState == 4) 
		{
		    // если статус 200 (ОК)
		    if (req.status == 200) 
		    {
			// десериализуем JSON
			var report = eval('('+req.responseText+')');
			if (report.status == "OK") 
			{
			    // Удаляем старый лист ссылок
			    var obj = document.getElementById("list");
			    obj.parentNode.removeChild(obj);
			    // Формируем список
			    var ul = document.createElement("ul");
			    ul.id = 'list';
			    for(p=0;p<report.data.length;p++){
				// Формируем элемент списка
				var li = document.createElement("li");
				// Формируем ссылку с названием страны
				var a = document.createElement("a");
				a.id = report.data[p].id;
				a.innerHTML = report.data[p].name;
				a.href = '#';
				a.className = "classFromLinkList";
				a.onclick =  function() {
				    ClickCountry(event);
				}
				var path = 'url(' + report.data[p].img + ')';
				a.style.backgroundImage = path;
				a.style.backgroundRepeat = "no-repeat";
				a.style.backgroundPosition = "0% 30%";
				// Добавляем сформированную ссылку в элемент списка
				li.appendChild(a);
				// Добавить элемент списка в список
				ul.appendChild(li);
			    }
			    // Добавляем список в соответственную секцию
			    document.getElementById("linkList").appendChild(ul);
			}
		    } 
		    else 
		    {
		    // тут обработка случая, если ответ не OK..
		    }
		    // вешаем обработчик заново
		    this.onClick="sideBtnClick(id)";
		}
	    }
	    var params = 'table=' + encodeURIComponent('countries');
	    req.send(params);
	    break;
	}
	case 'tab2':{
	    document.getElementById('tab2').className = 'btnOn';
	    document.getElementById('tab1').className = 'btnOff';
	    
	    req.open('POST', '../ajax/getList.php', true); 
	    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	    // onreadystatechange активируется при получении ответа сервера
	    req.onreadystatechange = function() 
	    { 
		// если запрос закончил выполняться
		if (req.readyState == 4) 
		{
		    // если статус 200 (ОК)
		    if (req.status == 200) 
		    {
			// десериализуем JSON
			var report = eval('('+req.responseText+')');
			if (report.status == "OK") 
			{
			    // Удаляем старый лист ссылок
			    var obj = document.getElementById("list");
			    obj.parentNode.removeChild(obj);
			    // Формируем список
			    var ul = document.createElement("ul");
			    ul.id = 'list';
			    for(p=0;p<report.data.length;p++){
				// Формируем элемент списка
				var li = document.createElement("li");
				// Формируем ссылку с названием страны
				var a = document.createElement("a");
				a.id = report.data[p].id;
				a.innerHTML = report.data[p].name;
				a.href = '#';
				a.className = "classFromLinkList";
				a.onclick =  function() {
				    ClickCountry(event);
				}
				a.style.backgroundRepeat = "no-repeat";
				// Добавляем сформированную ссылку в элемент списка
				li.appendChild(a);
				// Добавить элемент списка в список
				ul.appendChild(li);
			    }
			    // Добавляем список в соответственную секцию
			    document.getElementById("linkList").appendChild(ul);
			}
		    } 
		    else 
		    {
		    // тут обработка случая, если ответ не OK..
		    }
		    // вешаем обработчик заново
		    this.onClick="sideBtnClick(id)";
		}
	    }
	    var params = 'table=' + encodeURIComponent('brands');
	    req.send(params);
	    break;
	}
    }
}

function GetLinkList(){
    var p = 0;
    // снимаем обработчик, чтобы не вызывался повторно, до получения ответа
    this.onClick="";
    // Создаем объект для запроса к серверу
    var req = getXmlHttp();
    
    req.open('POST', '../ajax/getList.php', true); 
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // onreadystatechange активируется при получении ответа сервера
    req.onreadystatechange = function() 
    { 
	// если запрос закончил выполняться
	if (req.readyState == 4) 
	{
	    // если статус 200 (ОК)
	    if (req.status == 200) 
	    {
		// десериализуем JSON
		var report = eval('('+req.responseText+')');
		if (report.status == "OK")
		{
		    // Формируем список
		    var ul = document.createElement("ul");
		    ul.id = 'list';
		    for(p=0;p<report.data.length;p++){
			// Формируем элемент списка
			var li = document.createElement("li");
			// Формируем ссылку с названием страны
			var a = document.createElement("a");
			a.id = report.data[p].id;
			a.innerHTML = report.data[p].name;
			a.href = '#';
			a.className = "classFromLinkList";
			a.onclick = function() {
			    ClickCountry(event);
			}
			var path = 'url(' + report.data[p].img + ')';
			a.style.backgroundImage = path;
			a.style.backgroundRepeat = "no-repeat";
			a.style.backgroundPosition = "0% 30%";
			// Добавляем сформированную ссылку в элемент списка
			li.appendChild(a);
			// Добавить элемент списка в список
			ul.appendChild(li);
		    }
		    // Добавляем список в соответственную секцию
		    document.getElementById("linkList").appendChild(ul);
		}
	    } 
	    else 
	    {
	    // тут обработка случая, если ответ не OK..
	    }
	    // вешаем обработчик заново
	    this.onClick="sideBtnClick(id)";
	}
    }
    var params = 'table=' + encodeURIComponent('countries');
    req.send(params);
}

function ClickCountry(event){
    var el = event.target || event.scrElement;
    
    var p = 0;
    // Снимаем обработчик, чтобы не вызывался повторно, до получения ответа
    el.onClick="";    
    // Удаляем старую таблицу
    var obj = document.getElementById("plugsTable");
    if(obj != null){
	obj.parentNode.removeChild(obj);
    }    
    // Создаем объект для запроса к серверу
    var req = getXmlHttp();    
    req.open('POST', '../ajax/getPlugsTable.php', true); 
    req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // onreadystatechange активируется при получении ответа сервера
    req.onreadystatechange = function(){ 
	// Если запрос закончил выполняться
	if (req.readyState == 4){
	    // Если статус 200 (ОК)
	    if (req.status == 200){
		// Десериализуем JSON
		var report = eval('('+req.responseText+')');
		if (report.status == "OK"){
		    // Формируем таблицу
		    var tagTable = document.createElement("table");
		    tagTable.id = "plugsTable";
		    var indexRow = 0; // индекс строки
		    var indexCell = 0; // индекс ячейки
		    var idCell = 0; // идентификатор ячейки
		    for(p=0;p<report.data.length;p++){
			if (indexCell % 4 == 0) {			    
			    var tr = document.createElement("tr");
			}
			var td = document.createElement("td");
			var figure = document.createElement("figure");
			var img = document.createElement("img");
			var figcaption = document.createElement("figcaption");
			// Каждая четвертая картинка с новой строки таблицы
			if (indexCell % 4 == 0) {
			    indexRow++;
			}
			idCell = indexRow * 10 + indexCell + 1;
			td.id = idCell;
			td.className = 'pic';
			img.src = report.data[p].img;
			img.alt = report.data[p].name;
			figure.appendChild(img);
			figcaption.innerHTML = report.data[p].name;
			figure.appendChild(figcaption);
			td.appendChild(figure);
			tr.appendChild(td);
			indexCell++;
			if (indexCell % 4 == 0) {
			    tagTable.appendChild(tr);
			    delete tr;
			    indexCell = 0;
			}
		    }
		    if(indexCell % 4 != 0){
			tagTable.appendChild(tr);
			indexCell = 0;
		    }
		    // Добавляем список в соответственную секцию
		    document.getElementById("main_content").appendChild(tagTable);
		}
	    }
	    // Вешаем обработчик заново
	    el.onclick = function() {
		ClickCountry(event);
	    };
	}
    }
    var table = 0;
    if(document.getElementById('tab1').className == 'btnOn'){
	table = 1;
    }
    else if(document.getElementById('tab2').className == 'btnOn'){
	table = 2;
    }
    var params = 'id=' + encodeURIComponent(el.id) + '&table=' + encodeURIComponent(table) + '&exchange=' + encodeURIComponent('');
    req.send(params);
}